<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>固件升级</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>

<div class="app-page">

    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">
						 <input type="hidden" name="deviceUpgradeId" th:value="${deviceUpgradeId}">

                        <div class="filter-group">
                            <div class="filter-item">
                                <div class=" form-item row">
                                    <div class="label"><label>固件版本号</label></div>
                                    <div class="body">
                                          <select name="firmVer">
                                                <option value="">---请选择---</option>
                                                <option th:each="firmVerison:${versionNameMap}"
                                                        th:value="${firmVerison.key}"
                                                        th:text="${firmVerison.value}"
                                                        th:selected="${firmVer}">
                                                </option>
                                            </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>在线状态</label></div>
                                    <div class="flex1">
                                        <select name="deviceStatus" id="">
                                            <option value="">---请选择---</option>
                                            <option th:each="dsm: ${deviceStatusMap}"
                                                    th:value="${dsm.key}"
                                                    th:text="${dsm.value}"
                                                    th:selected="${deviceStatus}">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class=" form-item row">
                                    <div class="label"><label>机型</label></div>
                                    <div class="flex1">
                                         <select name="deviceModel">
                                             <option value="">---请选择---</option>
                                             <option th:each="deviceMode: ${deviceModelList}"
                                                     th:value="${deviceMode.deviceModel}"
                                                     th:text="${deviceMode.deviceModel}"
                                                     th:selected="${deviceModel}">
                                             </option>
                                          </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="filter-group">

                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>行政区</label></div>
                                    <div class="body">
                                        <div class="areaSelect area-item">
                                            <select name="district" class="select-district">
                                                <option value="">---请选择---</option>
                                                <option  th:each="dist: ${districtList}"
                                                         th:value="${dist.name}"
                                                         th:text="${dist.name}"
                                                         th:selected="${district}"></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item"></div>
                            <div class="filter-item" style="justify-content: flex-end">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group">
                        <button class="j-btn-control z-btn z-default">升级固件</button>
                    </div>


                    <table class="z-table">
                        <thead>
	                        <th>
	                            <input type="checkbox" class="input j-checkbox-all">
	                        </th>
	                        <th>机器码</th>
	                        <th>机型</th>
	                        <th>在线状态</th>
	                        <th>行政区</th>
	                        <th>物业名称</th>
	                        <th>楼栋</th>
	                        <th>单元</th>
	                        <th>固件版本号</th>
                        </thead>
                        <tbody>
	                        <tr th:each="firmDevice:${firmDeviceList}" th:attr="data-devcice-code=${firmDevice.deviceCode}">
	                            <td><input type="checkbox" class="input j-checkbox"> </td>
	                            <td th:text="${firmDevice.machineNumber}"></td>
	                            <td th:text="${firmDevice.deviceModel}"></td>
                                <div th:switch="${firmDevice.deviceStatus}">
                                    <td th:case="1">离线</td>
                                    <td th:case="0">在线</td>
                                </div>
	                            <td th:text="${firmDevice.district}"></td>
	                            <td th:text="${firmDevice.propertyName}"></td>
	                            <td th:text="${firmDevice.buildingName}"></td>
	                            <td th:text="${firmDevice.unitName}"></td>
	                            <td>
                                    <span th:if="${firmDevice.flag eq 0}" style="color: green" th:text="${firmDevice.currentFirmVer}"></span>
                                    <span th:if="${firmDevice.flag eq 1}" style="color: red" th:text="${firmDevice.currentFirmVer}"></span>
                                </td>
	                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="table-info z-pat z-fl">
                  		 总计：<p class="total" th:text="${total}"></p>在线：<p class="online" th:text="${onlineCount}"></p>离线：<p class="offline" th:text="${offlineCount}"></p>
                    </div>
                     <div class="clearfix">
                        <div class="z-page z-pat z-fr">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/address-0.0.3.js}"></script>
<script th:src="@{/js/prompt.js}"></script>

<script>
	//获取context path
	var context = $("meta[name='ctx']").attr("content");
	
	//处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
	
    // 加载select联动内容
    $('[name="searchType"] option').each(function (index, element) {
        if ((App.query.searchType === undefined && index === 0) || App.query.searchType == $(this).val()) {
            $('.j-option-switch .content').html($(".search").children('div').eq(index).html())
        }
    })

    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    var pagination = new Pagination(".z-page", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var url = context + "/firmware/firmDeviceList";
            var paramStr = createParamStr(pageIndex, pageSize);
            if(paramStr !== ""){
                paramStr = paramStr.substring(1);
                url = url + "?" + paramStr;
            }
            window.location.href = url;
        }
    });
	
    /**
     * 创建参数字符串
     * @param pageIndex 当前页
     * @param pageSize 每页条数
     * @returns {string} 参数字符串
     */
    function createParamStr(pageIndex, pageSize) {
    	var deviceUpgradeId = $("input[name='deviceUpgradeId']").val();
		var firmVer = $("select[name='firmVer']").val();
		var deviceStatus = $("select[name='deviceStatus']").val();
		var deviceModel = $("select[name='deviceModel']").val();
		var areaSelect = $("select[name='district']").val();

    	var url = "";
        if(!isBlank(pageIndex)){
            url = url + "&pageNum=" + pageIndex;
        }
        if(!isBlank(pageSize)){
            url = url + "&pageSize=" + pageSize;
        }
        
        if(!isBlank(firmVer)){
            url = url + "&firmVer=" + firmVer;
        }
        if(!isBlank(deviceStatus)){
            url = url + "&deviceStatus=" + deviceStatus;
        }
        if(!isBlank(deviceModel)){
            url = url + "&deviceModel=" + deviceModel;
        }
        if(!isBlank(areaSelect)){
            url = url + "&district=" + areaSelect;
        }
        if(!isBlank(deviceUpgradeId)){
            url = url + "&deviceUpgradeId=" + deviceUpgradeId;
        }
        return url;
    }
     

   	 //检查参数
     function isBlank(param) {
         if(undefined === param){
             return true;
         }
         if(null == param){
             return true;
         }
         if("" === param){
             return true;
         }
         return false;
     }
   	 
   	 
  // 更新
     $('.j-btn-control').click(function (params) {
         var deviceUpgradeId = $("[name='deviceUpgradeId']").val();
         if (deviceUpgradeId == '') {
             popup.tipsTop("软件升级ID为空，请联系管理员", 'warning');
             return;
         }
         var deviceCodes = getSelecteDevice();
         if (deviceCodes != '') {
             myConfirm('确认是否升级',function(){
                 App.ajax({
                     type: "POST",
                     url: context + "/firmware/updateFirmware",
                     data: {
                         deviceCodes: deviceCodes,
                         deviceUpgradeId :deviceUpgradeId
                     },
                     success: function (obj) {
                         var code = obj.code;
                         if (code == 0) {
                             // 升级完成 - 全部成功
                             popup.tipsTop('升级完成','success');
                             setTimeout(function (args) {
                                 //跳转到列表界面
                                parentOpen(context + "/firmware/list");
                             },2000);
                         } else {
                             popup.tipsTop(obj.msg, 'warning');
                         }
                     }
                 })
             });
         } else {
             popup.tipsTop("请选择需要升级的数据", 'warning');
         }
     });
  
     // 获取表格中选择的ID
     function getSelecteDevice() {
         let temp = [];
         $('tbody [type="checkbox"]').each(function (index, element) {
             if (element.checked == true) {
            	 console.log($(this).parents('tr,.tr'));
                 temp.push($(this).parents('tr,.tr').data('devcice-code'));
             }
         })
         return temp.join(',');
     }
     
     function parentOpen(url) {
    	 $(window.parent.window)[0].location.href = url;
     }
</script>
<script>
</script>

</body>

</html>